<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../c-asserts/mui/css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../c-asserts/sui/sui1.0.1.css" />
		<link rel="stylesheet" type="text/css" href="../../c-asserts/public.css" />
		<link rel="stylesheet" type="text/css" href="../../c-asserts/swiper/css/swiper.css" />
		<link rel="stylesheet" type="text/css" href="../../c-asserts/aui/css/aui.css" />
		<style type="text/css">
			.evaluate-img img {
				width: 45px;
				height: 45px;
				border-radius: 100%;
			}
			.evaluate-date {
				font-size: 15px;
				color: #666666;
				padding-left: 12px;
			}
			.evaluate-content {
				padding-top: 5px;
				height: auto;
				color: #666666;
				font-size: 14px;
				white-space: normal;
			}
			.evaluate-reply {
				color: #ff7720;
				font-size: 14px;
			}
			.mui-android header.mui-bar {
				display: none;
			}
			.mui-android .mui-bar-nav .mui-content {
				padding: 0;
			}
			.mui-table-view-cell > a:not(.mui-btn).mui-active {
				background-color: #FFFFFF !important;
			}
			.mui-control-content {
				background-color: white;
				min-height: 400px;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.evaluate-star-box {
				width: 100px;
				height: 21px;
				background-color: #c4c2c2;
			}
			.evaluate-star1 {
				width: 20px;
				height: 21px;
				background-color: #ff7720;
			}
			.evaluate-star2 {
				width: 40px;
				height: 21px;
				background-color: #ff7720;
			}
			.evaluate-star3 {
				width: 60px;
				height: 21px;
				background-color: #ff7720;
			}
			.evaluate-star4 {
				width: 80px;
				height: 21px;
				background-color: #ff7720;
			}
			.evaluate-star5 {
				width: 100px;
				height: 21px;
				background-color: #ff7720;
			}
			.evaluate-starback {
				width: 100px;
				background-image: url(../../c-image/star.png);
				background-size: 100% 100%;
				background-position: center center;
				background-repeat: no-repeat;
				height: 21px;
			}
		</style>
	</head>
	<body>
		<div id="header" class="mui-bar mui-bar-nav">
    		<button class="mui-btn mui-btn-link mui-btn-nav mui-pull-left" onclick="javascript:history.back(-1);" tapmode>
        <span class="close">
            <span class="mui-icon mui-icon-back"></span>
        	    返回
        </span>
   	 	</button>
    	<h2 class="mui-title">
   	     <span id="txtTitle">用户评价</span>
    	</h2>
		</div>
		<div id="slider" class="mui-slider ms-controller" ms-controller="eval-list" style=margin-top:50px>
    	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted ">
				<a class="mui-control-item" href="#item1mobile" >全部</a>
				<a class="mui-control-item" href="#item2mobile" >晒图</a>
				<a class="mui-control-item" href="#item3mobile" >差评</a>
				<a class="mui-control-item" href="#item4mobile" >最新</a>
			</div>
			
			<div class="mui-slider-progress-bar mui-col-xs-3" ></div>
			<div class="mui-slider-group" style=height: 100%px>
				<div id="item1mobile" class="mui-slider-item mui-control-content">
					<div id="scroll1" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="mui-loading" ms-visible="(eval1.length==0)">
								<div class="mui-spinner"></div>
							</div>
							<ul class="mui-table-view">
								<li ms-repeat="eval1" class="mui-table-view-cell mui-media" style="white-space:normal;">
									<a href="javascript:;" class=""> <img ms-attr-src="el.headimgurl" class="mui-media-object mui-pull-left">
									<div class="mui-media-body">
										<div class="sui-flex-row">
											{{el.username}} <div class="sui-flex1"></div>
											<div class="review-zan" ms-click="zanClick(el.id)" >
												<span class="sui-icon sui-icon-zan">{{el.like}}</span>
											</div>
										</div>
										<div class="sui-flex-row">
											<div class="evaluate-star-box">
												<div ms-class="evaluate-star{{el.evalstar}}">
													<div class="evaluate-starback"></div>
												</div>
											</div>
											<div class="evaluate-date">
												{{el.createdate}}
											</div>
										</div>
									</div>
									<div class="evaluate-content">
										{{el.content}}
									</div>
									<div class="evaluate-content aui-content">
										<ul class="aui-list-view aui-grid-view">
											<li ms-repeat-elem="el.photo" class="aui-list-view-cell aui-img aui-col-xs-4">
												<img class="aui-img-object" ms-attr-src="{{elem}}">
											</li>
										</ul>
									</div>
									<div class="mui-content-padded evaluate-content" ms-visible="(el.reply!='')">
										<span class="evaluate-reply">商家回复：</span>
										{{el.reply}}
									</div> </a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="item2mobile" class="mui-slider-item mui-control-content">
					<div id="scroll2" class="mui-scroll-wrapper">
						<div class="mui-scroll" >
							<div class="mui-loading" ms-visible="(eval2.length==0)" >
								<div class="mui-spinner"></div>
							</div>
							<ul class="mui-table-view">
								<li ms-repeat="eval2" class="mui-table-view-cell mui-media" style="white-space:normal;">
									<a href="javascript:;" class=""> <img ms-attr-src="el.headimgurl" class="mui-media-object mui-pull-left">
									<div class="mui-media-body">
										<div class="sui-flex-row">
											{{el.username}} <div class="sui-flex1"></div>
											<div class="review-zan" ms-click="zanClick(el.id)" >
												<span class="sui-icon sui-icon-zan">{{el.like}}</span>
											</div>
										</div>
										<div class="sui-flex-row">
											<div class="evaluate-star-box">
												<div ms-class="evaluate-star{{el.evalstar}}">
													<div class="evaluate-starback"></div>
												</div>
											</div>
											<div class="evaluate-date">
												{{el.createdate}}
											</div>
										</div>
									</div>
									<div class="evaluate-content">
										{{el.content}}
									</div>
									<div class="evaluate-content aui-content">
										<ul class="aui-list-view aui-grid-view">
											<li ms-repeat-elem="el.photo" class="aui-list-view-cell aui-img aui-col-xs-4">
												<img class="aui-img-object" ms-attr-src="{{elem}}">
											</li>
										</ul>
									</div>
									<div class="mui-content-padded evaluate-content" ms-visible="(el.reply!='')">
										<span class="evaluate-reply">商家回复：</span>
										{{el.reply}}
									</div> </a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="item3mobile" class="mui-slider-item mui-control-content">
					<div id="scroll3" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="mui-loading" ms-visible="(eval3.length==0)">
								<div class="mui-spinner"></div>
							</div>
							<ul class="mui-table-view">
								<li ms-repeat="eval3" class="mui-table-view-cell mui-media" style="white-space:normal;">
									<a href="javascript:;" class=""> <img ms-attr-src="el.headimgurl" class="mui-media-object mui-pull-left">
									<div class="mui-media-body">
										<div class="sui-flex-row">
											{{el.username}}
											<div class="sui-flex1"></div>
											<div class="review-zan" ms-click="zanClick(el.id)" >
												<span class="sui-icon sui-icon-zan">{{el.like}}</span>
											</div>
										</div>
										<div class="sui-flex-row">
											<div class="evaluate-star-box">
												<div ms-class="evaluate-star{{el.evalstar}}">
													<div class="evaluate-starback"></div>
												</div>
											</div>
											<div class="evaluate-date">
												{{el.createdate}}
											</div>
										</div>
									</div>
									<div class="evaluate-content">
										{{el.content}}
									</div>
									<div class="evaluate-content aui-content">
										<ul class="aui-list-view aui-grid-view">
											<li ms-repeat-elem="el.photo" class="aui-list-view-cell aui-img aui-col-xs-4">
												<img class="aui-img-object" ms-attr-src="{{elem}}">
											</li>
										</ul>
									</div>
									<div class="mui-content-padded evaluate-content" ms-visible="(el.reply!='')">
										<span class="evaluate-reply">商家回复：</span>
										{{el.reply}}
									</div> </a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="item4mobile" class="mui-slider-item mui-control-content">
					<div id="scroll4" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="mui-loading" ms-visible="(eval4.length==0)">
								<div class="mui-spinner"></div>
							</div>
							<ul class="mui-table-view">
								<li ms-repeat="eval4" class="mui-table-view-cell mui-media" style="white-space:normal;">
									<a href="javascript:;" class=""> <img ms-attr-src="el.headimgurl" class="mui-media-object mui-pull-left">
									<div class="mui-media-body">
										<div class="sui-flex-row">
											{{el.username}} <div class="sui-flex1"></div>
											<div class="review-zan" ms-click="zanClick(el.id)" >
												<span class="sui-icon sui-icon-zan">{{el.like}}</span>
											</div>
										</div>
										<div class="sui-flex-row">
											<div class="evaluate-star-box">
												<div ms-class="evaluate-star{{el.evalstar}}">
													<div class="evaluate-starback"></div>
												</div>
											</div>
											<div class="evaluate-date">
												{{el.createdate}}
											</div>
										</div>
									</div>
									<div class="evaluate-content">
										{{el.content}}
									</div>
									<div class="evaluate-content aui-content">
										<ul class="aui-list-view aui-grid-view">
											<li ms-repeat-elem="el.photo" class="aui-list-view-cell aui-img aui-col-xs-4">
												<img class="aui-img-object" ms-attr-src="{{elem}}">
											</li>
										</ul>
									</div>
									<div class="mui-content-padded evaluate-content" ms-visible="(el.reply!='')">
										<span class="evaluate-reply">商家回复：</span>
										{{el.reply}}
									</div> </a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../c-script/api.js"></script>
	<script type="text/javascript" src="../../c-script/jquery-2.1.3.min.js"></script>
	<script type="text/javascript" src="../../c-script/public.js"></script>
	<script type="text/javascript" src="../../c-script/avalon.mobile.js"></script>
	<script type="text/javascript" src="../../c-asserts/mui/js/mui.min.js"></script>
	<script type="text/javascript" src="../../c-asserts/swiper/js/swiper.min.js"></script>
	<script type="text/javascript">
		var shopid="";
		var themeid="";
		mui.init({
			swipeBack : false
		});
		
		(function($) {
			
			$('.mui-scroll-wrapper').scroll({
				indicators : false //是否显示滚动条
			});
			document.getElementById('slider').addEventListener('slide', function(e) {
				if (evalModel["eval" + (e.detail.slideNumber + 1)].length == 0) {
					evalFind(shopid, themeid, e.detail.slideNumber + 1);
				}
			});
			var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
			$('.mui-input-group').on('change', 'input', function() {
				if (this.checked) {
					sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
					//force repaint
					sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
				}
			});
		})(mui);
		var evalModel = avalon.define({
			$id : "eval-list",
			eval1 : new Array(),
			eval2 : new Array(),
			eval3 : new Array(),
			eval4 : new Array(),
			page : 1,
		});
		
		function evalFind(shopid, themeid, type) {
			callSvr("eval/find",{
				shopid:shopid,
				themeid:themeid,
				type:type+"",
				page :evalModel.page,
				pagesize:10
			}, function(result) {
				evalModel["eval" + type] = result;
			});
		}

		$(document).ready(function(){
			try {
				$('.mui-control-content').each(function(index, ele) {
					ele.style.minHeight = api.frameHeight - 40 + 'px';
				});
			} catch(e) {
			}
			try {
				if ( eval(parseQueryString(window.location.search)).shopid!= undefined) {
					shopid = eval(parseQueryString(window.location.search)).shopid;
				}
			} catch(e) {
			}
			try {
				if (eval(parseQueryString(window.location.search)).themeid != undefined) {
					themeid = eval(parseQueryString(window.location.search)).themeid;
				}
			} catch(e){
			}
			evalFind(shopid, themeid, 1);
		});
	</script>
</html>